<template>
  <div>
      <!--开始页面-->
      <el-row v-show="!isStart">
        <el-col span=1 offset="3">
          <div>
            <pre>
              <h1 style="font-size:25px">健康风险评估</h1>
              <span style="font-size:18px">
  健康风险评估（health risk appraisal, HRA)是一种方法或工具，
  用于描述和评估某一个体未来发生某种特定疾病或因为某种特定疾病
  导致死亡的可能性。
  这种分析过程目的在于估计特定时间发生的可能性，而不在于做出明确
  的诊断。健康风险评估师对个人的健康状况及未来患病/死亡危险性的
  量化评估。包括健康状态、未来患病/死亡危险、量化评估3个关键词。
              </span><br>
              <el-button v-show="!ifWrite" @click='isStart=true' type="primary" plain style="width:300px;height:50px">我准备好了 开始吧</el-button>
              <span v-show="ifWrite" style="font-size:30px;color:green;">你已完成风险评估 请耐心等待结果</span>
            </pre>
          </div>
        </el-col>
      </el-row>
      <div v-show="isStart">
        <el-form>
          <div class="questionDiv" v-for="(item) in questions" :key="item.id">
              <!--<p>{{item.question}}</p>-->
              <!--<el-radio-group v-model="isStart" v-show="item.isRadio==0" prop="question">
                <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.options" :key="value.id"></el-radio>
              </el-radio-group>-->
              <el-form-item  :label="item.question" prop="selectOption" v-show="item.isRadio==0">
                  <el-radio-group v-model="item.selectOption">
                    <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-radio>
                  </el-radio-group>
              </el-form-item>
              <el-form-item :label="item.question" prop="checkOptions" v-show="item.isRadio==1">
                <el-checkbox-group v-model="item.checkOptions">
                  <el-checkbox border  v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
               
          </div><!--{{questions}}-->
          <el-form-item>
            <el-button type="primary" @click="submitForm()">立即评估</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  data() {
    return {
      isStart:false,
      questions:[],
      ifWrite:false

    }
  },
  methods:{
      initQuestion(){
        axios.get("/tAssessQuestion/queryAllQuestion").then((response)=>{
            this.questions=response.data;
            for(var i=0;i<this.questions.length;i++){
                if(this.questions[i].isRadio==1){
                      this.$set(this.questions[i],'checkOptions', []); //起作用
                }
            }
            //this.answers=this.questions;
        })
      },
      queryUserIfWrite(){
          axios.post("/tAssess/queryUserIfWritreAssessAnswer").then((response)=>{
            //表示填写过问卷
            if(response.data==true){
                this.ifWrite=true;
            }else{
                this.ifWrite=false;
            }
          })
      },
      submitForm() {
        //向后台发送选中的数据
        axios.post("/tAssessAnswer/addAnswer",this.questions).then(()=>{
            this.$message({
              message: '评估成功，请耐心等待结果',
              type: 'success'
            });
            this.$router.push("/assess");
            //this.queryUserIfWrite();
            //alert('msg');
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
  mounted(){
      this.queryUserIfWrite();
      this.initQuestion();

  }
}
</script>

<style>

</style>